<!--上传图片组件-->

<template>
  <div>
    <el-progress v-if="isUpLoading" type="circle" :percentage="uploadedPercentage"
                 :status="uploadedPercentage===100?'success':undefined" :width="178"></el-progress>
    <el-upload
        v-else
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :http-request="handleUploadImage"
    >
      <img v-if="value" :src="value" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import {uploadImage} from "@/api/courses/courses";

export default {
  name: "uploadFile",
  data() {
    return {
      //上传图片的进度
      uploadedPercentage: 0,
      //是否上传中 true:上传中   false:上传完成
      isUpLoading: false,
    }
  },
  props: {
    value:{type:String}
  },
  methods: {
//上传图片的自定义方法
    handleUploadImage(option) {
      const fd = new FormData()
      fd.append('file', option.file)
      //上传中
      this.isUpLoading = true
      uploadImage(fd, (e) => {
        //上传图片的回调
        //loaded上传多少   total总共需要上传的值
        this.uploadedPercentage = Math.floor(e.loaded / e.total * 100);
      }).then((res) => {
        if (res.data.code == '200') {
          console.log("上传文件：：：",res);
          this.$emit('input',res.data.data.url)
        } else {
          this.$message.error('上传头像图片失败!');
        }
      }).finally(() => {
        this.isUpLoading = false
      })

    }
  }
}
</script>

<style scoped>
/*上传图片*/
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
